<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>帖子${one.id}详情</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/css/admin.css">
    <script src="${base}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <style>
    	.layui-bg-black{width: 200px;height: 136px;margin-right: 30px;float: left;text-align: center;font-size: 33px;color: #000000!important;padding-top: 30px;}
    	.hide {display: none;}
    	.checkbox{display: inline-block;}
    	.layui-form-item{font-size: 18px;}
    	.width100 {width: 100px;}
    	.discuss{ float: left;margin-left: 30px;padding-top: 6px;}
    	.discuss p{text-align: left; font-size: 13px;margin-top: 5px;padding-top: 2px;}
    	.discuss_img{ float: left;margin-left: 10px;margin-top: 5px;width: 64px;height: 64px;}
     	.img {vertical-align: top;width: 300px;} 
     	 .click{background-color: #c2c2c2;} 
     	 .yu {background-color: #66ccff;}
     	 
    </style>
</head>
<body  class="layui-layout-body" style="overflow:scroll;">
<#include "/common/left.flt">	

<div class="layui-main" style="position: absolute;left: 205px;top: 20px; width: calc(100% - 210px);" >
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
  <legend>帖子${one.id}详情</legend>
</fieldset>

<div class="layui-form hide" id="discuss" style="padding-top:20px;padding-right:20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">地区</label>
    <div class="layui-input-block">
      <select name="area_x" id="area_x" >
      	<option value="-1">楼主</option>
      	<option value="0">随机男</option>
      	<option value="1">随机女</option>
      	<#list area_list as one>
        <option value="${one.code}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
    	<input name="content" id="content" placeholder="请输入内容" class="layui-input" />
    </div>
  </div>
</div>


<div class="layui-form"  style="padding-top:20px;">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">用户</label>
    <div class="layui-input-block">
      <img src="http://qiniu.static.50dufei.top/${users.user_header}" style="border-radius: 50%;" /> <a href="${base}/users_list/detail?user_id=${users.id}" target="_blank" >${users.nick_name} ${users.user_mobile?default('')}</a>  
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地区</label>
    <div class="layui-input-block">
      <select name="area" id="area" disabled="disabled" >
      	<#list area_list as one>
        <option value="${one.code}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">板块</label>
    <div class="layui-input-block">
      <select name="social" id="social" disabled="disabled" >
      	<#list social_list as one>
        <option value="${one.id}">${one.title}</option>
        </#list>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
      <textarea name="card_content" id="card_content" class="layui-textarea" >${one.content}</textarea>
      
    </div>
   </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-block">
    	<#list img_list as one>
    		<img src="http://qiniu.static.50dufei.top/${one.image_url}" name="img" class="img" id="img${one.id}" r-value="${one.id}-${one.image_url}" />
    		<i class="layui-icon layui-icon-close" onclick="del_img(${one.id});" ></i> 
    	</#list>
    	<button type="button" class="layui-btn" id="upload" title="新加图片" ><i class="fa fa-upload" ></i>新加图片</button>
    	<button type="button" class="layui-btn layui-btn-danger" id="save" title="保存内容"><i class="layui-icon"></i>保存内容</button>
    	<button type="button" class="layui-btn layui-btn-danger" id="img-save" title="不需要替换图片，别操作"><i class="layui-icon"></i>确定保存图片</button>
    	<button type="button" class="layui-btn layui-btn-norma" id="img-delete" title="不需要图片，全部删除"><i class="layui-icon"></i>全部删除图片</button>
    </div>
   </div>
    
    <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">评论</label>
    	<#list discuss_list as one>
    	 	<div class="layui-input-block layui-form-item <#if one.create_time == 1893427200>yu</#if>" id="${one.type}_${one.id}" onclick="select_me(this);" user_id="${one.user_id}">
	    		<img class="discuss_img"  src="${base}/images/logo.png"  data-src="${one.user_header?default('http://qiniu.static.50dufei.top/head3.png')}?imageView2/1/w/64/h/64" style="border-radius: 50%;" />
	    		<div class="discuss">
	    			<a href="${base}/users_list/detail?user_id=${one.user_id}" target="_blank" >${one.nick_name?default('')}</a>   <div title="删评论" onclick="del_discuss(${one.id});" class="fa fa-trash"></div> 
	    			<p>${one.content}</p>
	    		</div>
	    		<article id="discuss_id_${one.id}">
	    		</article>
    		</div>
    		<script type="text/javascript">
    			$.post("${base}/card_list/answer_list",
    			   		{"discuss_id":${one.id}},function(data){ 
    			   			//console.log(data);
    			   			if (data.length > 0) {
    			   				var html = "";
    			   				for(var k = 0;k< data.length ; k++) {
    			   					html +='<div class="layui-input-block layui-form-item" style="padding-left: 60px;" onclick="select_me(this);" id="'+data[k]["type"]+'_'+data[k]["id"]+'"  user_id="'+data[k]["user_id"]+'">';
    			   					html +='<img class="discuss_img" src="'+data[k]["user_header"]+'?imageView2/1/w/64/h/64" style="border-radius: 50%;" />';
    			   					html +='<div class="discuss">';
    			   					html +='<a href="${base}/users_list/detail?user_id='+data[k]["user_id"]+'" target="_blank" >'+data[k]["nick_name"]+'</a>   <div title="删评论" onclick="del_discuss('+data[k]["id"]+');" class="fa fa-trash"></div>';
    			   					html +='<p>'+data[k]["content"]+'</p>';
    			   					html +='</div>';
    			   					html +='</div>';
    			   				}
								$("#discuss_id_${one.id}").html(html);   			   					
    			   			}
    			   			
    			   			
    			   		}
    			    );  
    		</script>
    	</#list>
    </div>
    <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">操作</label>
	    <div class="layui-input-block">
	    	&emsp;是否推荐<a onclick="alt(${one.id});" > <#if one.alt_tj == 1><span class="fa fa-times-circle"></span><#else><span class="fa fa-check-circle"></span></#if></a>
&emsp;&emsp;是否展示<a onclick="show(${one.id});"><#if one.is_show == 1><span class="fa fa-check-circle"></span><#else><span class="fa fa-times-circle"></span></#if></a>
&emsp;&emsp;是否审核<a onclick="check(${one.id});"><#if one.is_check == 1><span class="fa fa-check-circle"></span><#else><span class="fa fa-times-circle"></span></#if></a>
&emsp;&emsp;是否置顶<a onclick="_top(${one.id});"><#if one.is_top == 1><span class="fa fa-times-circle"></span><#else><span class="fa fa-check-circle"></span></#if></a>

	    </div>
	    <div class="layui-input-block">
	    	<a onclick="del(${one.id});" ><span class="fa fa-trash">删除此贴</span></a>&emsp;&emsp;
	    	<#if base=="/50du"><a onclick="copy(${one.id});" title="复制" ><span class="fa fa-copy">复制此贴</span></a></#if>
	    </div>
	    <div class="layui-input-block">
	     	<a onclick="discuss(${one.id},0,0);" ><span class="fa fa-comments-o">评论帖子</span></a>&emsp;&emsp; <a onclick="sub_discuss();" ><span class="fa fa-comments">子评论帖子</span></a>
	     	
	     	&emsp;&emsp;<a onclick="discuss(${one.id},0,1);" ><span class="fa fa-male">预评论男</span></a>&emsp;&emsp;
	     	<a onclick="discuss(${one.id},1,1);" ><span class="fa fa-female">预评论女</span></a>
	    </div>
	    
    </div>
    
     <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">发帖时间</label>
	    <div class="layui-input-block">
	      <input name="create_time" id="create_time" placeholder="发帖时间" class="layui-input layui-text" value="" />
	    </div>
	  </div>
	  
  </div>
</div>
<form action="${base}/util/uploadFile" method="post" name="uploadForm" enctype="multipart/form-data" id="uploadForm" class="hide" >
    <input name="pic" type="file" id="pic" class="hide"/>
</form>
</body>
<script src="${base}/js/jquery.form.js"></script>
<script src="${base}/layui/layui.all.js"></script>
<script src="${base}/laydate/laydate.js"></script>
<script type="text/javascript">
$("#area").val('${users.area_id?default('')}');
$("#social").val('${one.topic_id?default('')}');

layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  //执行一个laydate实例
	  laydate.render({
	    elem: '#create_time' //指定元素
	   	,type: 'datetime'
	    ,value: '${create_time?default('')}' 
	  });
});
	

$("img.discuss_img").hover(function(){
    $(this).attr("src", $(this).attr("data-src"));
},function(){
});

var flag = 0 ;
var currentPic = null;
$('body').on('click', '.img', function () {
	flag = 0;
    currentPic = $(this);
    $("#pic").attr("accept","image/*");
    $("#pic").click();
});

$('body').on('click', '#upload', function () {
	flag = 1;
    currentPic = $(this);
    $("#pic").attr("accept","image/*");
    $("#pic").click();
});

$("#pic").change(function (){
    var fileName = $("#pic").val()

    var options = {
        success:  showResponse,  //处理完成的回调函数
        resetForm: true,
        //dataType:  'json'
    };
    $("#uploadForm").ajaxSubmit(options);
});
$("#img-save").click(function (){
	var str = "";
	$("img.img").each(function(){
		str += $(this).attr("r-value") + ","; 
	});
	$.post("${base}/card_list/replaceImg",
	   		{"card_id":${one.id},"str":str},function(data){ 
	   			layer.alert(data);
	   		}
	 );	
});
$("#save").click(function (){
	var content = $("#card_content").val();
	$.post("${base}/card_list/save_content",
	   		{"card_id":${one.id},"content":content},function(data){ 
	   			layer.alert(data);
	   		}
	 );
});


function del_img(id){
	layer.confirm('确定要删除吗？', {
		  btn: ['确定'] //按钮
		}, function(){
			$.post("${base}/card_list/deleteImg",
			   		{"card_id":id},function(data){ 
			   			layer.alert(data);
			   			window.location.reload();
			   		}
			 );	
	});
}

function showResponse(data)  {
    console.log(data);
    if(data.error == 0) {
    	if (flag == 0){
    		currentPic.attr("src","http://qiniu.static.50dufei.top/" + data.url+"?imageView2/1/w/100/h/100");
       	 	currentPic.attr("r-value", currentPic.attr("id").replace("img", "") +"-" + data.url);	
    	} else {
    		$.post("${base}/card_list/addImg",
			   		{"card_id":${one.id},"url":data.url},function(data_id){
			   			var html = "<img name=\"img\" class=\"img\" src=\"http://qiniu.static.50dufei.top\/"+data.url+"\" id=\"img"+data_id+"\"  r-value=\""+data_id+"-"+data.url+"\" /><i class=\"layui-icon layui-icon-close\" onclick=\"del_img("+data_id+");\" ></i>";
			   			console.log(html);
			   			currentPic.before(html);
			   		}
			 );
    	}
    	
    	 
    } else {
    	layer.alert(data.message);
    }
   
}

function copy(id){
	$.post("${base}/card_list/copy",
	   		{"card_id":id},function(data){ 
	   			layer.alert(data);
	   			window.location.reload();
	   		}
	    );  
}

function select_me(obj){
	$("div.layui-input-block").removeClass("click");
	$(obj).addClass("click");
}
function sub_discuss(){
	layer.alert("开发中");
}

var type_flag = 0; 
function discuss(id,area_x,type){
	$("#area_x").val(area_x);
	layui.use('form', function() {
	    var form = layui.form;
	    form.render('select');
	});
	type_flag = 1;
	layer.open({
	    type: 1 ,
	    title: '帖子' + id +'评论',   //标题
	    area: ['600px', '400px'],   //宽高
	    shade: 0.4,   //遮罩透明度
	    content: $("#discuss"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var area = $("#area_x").val();
	    	var content = $("#content").val();
	    	var buser_id = "";
	    	if ($("div.click").attr("user_id")){
	    		buser_id = $("div.click").attr("user_id");
	    	}
	    	if (content){
	    		$.post("${base}/card_list/giveDiscuss",
				   		{"id":id,"area":area,"buser_id":buser_id,"content":content,"type":type},function(data){ 
				   			layer.msg(data);
// 				   			$("#discuss").hide();
				   		}
				 );	
	    	}
// 	        layer.close(index);
	        
// 	        $("#discuss").hide();
	    },
		cancel: function(){
			$("#discuss").hide();        
	    }
	});
}

function zan(id){
	layer.prompt({title: '请输入点赞数量，并确认', formType: 2}, function(content, index){
		$.post("${base}/card_list/giveLike",
		   		{"id":id,"num":content},function(data){ 
		   			layer.alert(data);
		   		}
		    );
		layer.close(index);
    });	
}

function del(id){
	//询问框
	layer.confirm('确定要删除吗？', {
	  btn: ['确定'] //按钮
	}, function(){
		$.post("${base}/card_list/del",
		   		{"id":id},function(data){ 
		   			layer.alert(data);
		   			window.location.reload();
		   		}
		    );  
	});
}

function alt(id){
	$.post("${base}/card_list/alt",
	   		{"id":id},function(data){ 
	   			layer.alert(data);
	   			window.location.reload();
	   		}
	    );  
}

function show(id){
	$.post("${base}/card_list/show",
	   		{"id":id},function(data){ 
	   			layer.alert(data);
	   			window.location.reload();
	   		}
	    );  
}

function check(id){
	$.post("${base}/card_list/check",
	   		{"id":id},function(data){ 
	   			layer.alert(data);
	   			window.location.reload();
	   		}
	    );  
}

function _top(id){
	$.post("${base}/card_list/top",
	   		{"id":id},function(data){ 
	   			layer.alert(data);
	   			window.location.reload();
	   		}
	    );  
}


function del_discuss(id){
	$.post("${base}/card_list/discuss_del",
	   		{"id":id},function(data){ 
	   			layer.msg(data);
	   			window.location.reload();
	   		}
	    );
}


$('#content').bind('keyup', function(event) {
	if (event.keyCode == "13") {
	　　　　//回车执行查询
	　　　　var area = $("#area_x").val();
		  var content = $("#content").val();
		  var buser_id = "";
		  if ($("div.click").attr("user_id")){
				buser_id = $("div.click").attr("user_id");
		  }
		  if (content && type_flag == 1){
			  $.post("${base}/card_list/giveDiscuss",
				   		{"id":${one.id},"area":area,"buser_id":buser_id,"content":content,"type":1},function(data){ 
				   			layer.msg(data);
				   			$("#content").val("");
				   		}
				 );		
		  }
	}
});

</script>
</html>